<template>
  <div class="post-item" data-index="">
      <span class="post-meta">
        <router-link :to="`/category/${post.parent}`" class="post-category">{{post.parent}}</router-link>
      </span>
    <router-link :to="`/post/${post.path}`" class="post-title">{{post.name}}</router-link>
  </div>
</template>
<script>
import util from '../util'

export default {
  name: 'PostListItem',
  props: ['post'],
  computed: {
    formatedView () {
      return util.formatNumber(this.post.view)
    }
  }
}
</script>

<style lang="less" rel="text/less" scoped>
  .post-item {
    margin: 10px 0 20px;
    border-left: 3px solid #d1d9d1;
    padding-left: 5px;
  }

  .post-meta {
    display: block;
    height: 32px;
    line-height: 32px;
    > * {
      vertical-align: middle;
    }
  }

  .post-category {
    padding: 3px 5px;
    margin-right: 5px;
    background-color: #d7eae5;
    color: #357d5c;
  }

  .post-title {
    font-size: 1.5rem;
    height: 40px;
    line-height: 40px;
    color: #348d60;
    max-width: 790px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    display: inline-block;
    white-space: nowrap;

    &:hover {
      color: #184929;
    }
  }
</style>
